<template>
  <div class="tabBar">
    <div class="index barItem" :class="{active: barIndex === 1}" @click="barItemclick(1)">
      <img src="../../assets/index.png" alt="">
      <span>记一笔</span>
    </div>
    <div class="home barItem" :class="{active: barIndex === 2}" @click="barItemclick(2)">
       <img src="../../assets/home.png" alt="">
       <span>统计</span>
    </div>
  </div>
  
</template>

<script>
export default {
  name: 'TabBar',
  data() {
    return {
      barIndex: 2
    }
  },
  created() {
    let nowPath = this.$route.path
    nowPath === '/index' ? this.barIndex = 1 : this.barIndex = 2
  },
  methods: {
    barItemclick(index) {
      this.barIndex = index
      if(index === 1) {
        this.$router.push('/index')
      } else{
        this.$router.push('/home')
        
      }
    }
  }
}
</script>

<style scoped>
  .tabBar{
    display: flex;
    height: 8vh;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    border-top: 1px solid #ccc;
  }
  .index{
    flex: 1;
  }
  .index img,
  .home img {
    height: 25px;
    width: 25px;
  }
  .home{
    flex: 1;
  }
  .barItem{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }

  .active{
    border-bottom: 2px solid #000;
  }
</style>